<template>
    <span>
        <el-form v-if="business" label-position="left" size="mini" label-width="80px">
            <el-form-item label="名称">
                <el-input :value="business.name"></el-input>
            </el-form-item>
            <el-form-item label="柜台">
                <el-select
                        placeholder="请选择"
                        :value="business.counter.name"
                        @change="counterChange('counter', $event)"
                >
                    <el-option
                            v-for="counter in counters"
                            :key="counter.name"
                            :label="counter.name"
                            :value="counter.name"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="操作演示">
                <video
                        v-if="business.businessVideoUrl && business.businessVideoUrl !== '#'"
                        :src="business.businessVideoUrl"
                        style="width: 100%"
                        controls
                />
                <media-selector
                        :content="business.businessVideoUrl"
                        type="video"
                        @change="itemChange('businessVideoUrl', $event)"
                />
            </el-form-item>
            <el-form-item label="教学音频">
                <audio v-if="business.businessAudioUrl && business.businessAudioUrl !== '#'" controls style="width: 100%">
                    <source :src="business.businessAudioUrl" type="audio/mpeg">
                </audio>
                <media-selector
                        :content="business.businessAudioUrl"
                        type="audio"
                        @change="itemChange('businessAudioUrl', $event)"
                />
            </el-form-item>
            <el-form-item label="总分">
                {{ business.totalScore }}
            </el-form-item>
        </el-form>
        <div class="step-edit-title">
            <div>步骤目录</div>
            <el-button
                    v-if="!toggleAdd"
                    icon="el-icon-plus"
                    type="primary"
                    plain
                    circle
                    size="mini"
                    @click="toggleAdd = !toggleAdd"
            />
            <el-button
                    v-if="toggleAdd"
                    icon="el-icon-minus"
                    type="primary"
                    plain
                    circle
                    size="mini"
                    @click="toggleAdd = !toggleAdd"
            />
        </div>
        <step-form v-if="toggleAdd" @updated="toggleAdd = false" />
        <el-collapse v-if="!toggleAdd && business" v-model="activeStep" accordion>
            <el-collapse-item
                    v-for="(step, i) in business.steps"
                    :key="step.title + step.pages"
                    :name="step.title"
            >
                <div slot="title" style="display: flex; justify-content: space-between">
                    <div>{{ `${i+1}. ${step.title}` }}</div>
                    <div>{{ `业务环节: ${step.pages}` }}</div>
                </div>
                <step-form :step="step" :index="i" @updated="activeStep = null" />
            </el-collapse-item>
        </el-collapse>
    </span>
</template>
<script>
    import stepForm from './stepForm'
    import mediaSelector from './mediaSelector'

    export default {
        name: 'business-config',
        props: ['business', 'counters'],
        components: { 'step-form': stepForm, 'media-selector': mediaSelector },
        data() {
            return {
                toggleAdd: false,
                activeStep: null
            }
        },
        methods: {
            counterChange(key, name) {
                const counter = this.counters.filter(counter => counter.name === name)[0]
                this.itemChange(key, counter)
                this.$store.commit('course/setCounter', { counter })
            },
            itemChange(key, value) {
                this.$store.commit('course/update', {
                    business: { ...this.business, [key]: value }
                })
            }
        }
    }
</script>
<style lang="less">
    .step-edit-title {
        display: flex;
        justify-content: space-between;
        padding-bottom: 5px;
        align-items: center;
    }
</style>


